<template>
  <div class="index-warp" v-loading="loading" element-loading-text="加载中..."
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-row>
      <el-col :span="22" :md="10" class="el-col-md-offset-7 el-col-offset-1">
        <div class="index-header">
          <h2>网站工具箱</h2>
        </div>
        <el-tabs v-model="activeName" class="main-tabs" @tab-click="handleClick">
          <el-tab-pane label="短链接生成" name="short">
            <el-form ref="shortFormRef" :model="shortForm" status-icon label-position="top" label-width="120px"
              class="short-form">
              <el-form-item label="密码" prop="pass">
                <el-input v-model="shortForm.pass" type="password" autocomplete="off" />
              </el-form-item>
              <el-form-item label="长链接" prop="long">
                <el-input class="textarea-p" v-model="shortForm.long" type="textarea" rows="5" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm(shortFormRef)">提交</el-button>
                <el-button @click="resetForm(shortFormRef)">重置</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="短链接修改" name="editshort">
            <el-form ref="editFormRef" :model="editForm" status-icon label-position="top" label-width="120px"
              class="short-form">
              <el-form-item label="密码" prop="pass">
                <el-input v-model="editForm.pass" type="password" autocomplete="off" />
              </el-form-item>
              <el-form-item label="短链接" prop="key">
                <el-input v-model="editForm.key" type="text" autocomplete="off">
                  <template #append>
                    <el-button @click="getData" :icon="Search" />
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="长链接" prop="long">
                <el-input class="textarea-p" v-model="editForm.long" type="textarea" rows="5" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitEditForm(editFormRef)">提交</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="图片上传" name="image">
            <div class="el-form-item el-form-item--feedback" style="display:block">
              <label for="pass" class="el-form-item__label" style="width: 60px;text-align:left">密码</label>
              <div class="el-form-item__content">
                <div class="el-input">
                  <el-input v-model="uploadData.pass" type="password" autocomplete="off" />
                </div>
              </div>
            </div>
            <div class="el-form-item el-form-item--feedback" style="display:block">
              <label for="long" class="el-form-item__label" style="width: 60px;text-align:left">图片</label>
              <div class="el-form-item__content">
                <div class="el-textarea">
                  <el-upload class="upload-form" :data="uploadData" :before-upload="beforeUpload"
                    :on-success="onSuccess" :show-file-list="false" drag action="https://s.bongm.com/api/image">
                    <el-icon class="el-icon--upload">
                      <upload-filled />
                    </el-icon>
                    <div class="el-upload__text">
                      拖放文件或 <em>点击上传</em>
                    </div>
                  </el-upload>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="图片列表" name="imagelist">
            <el-row :gutter="22">
              <el-col v-for="(item, index) in shortList.data" :key="index" :span="12" style="margin-bottom: 20px">
                <el-card>
                  <el-image style="" :src="item.url" fit="contain" lazy />
                  <div style="padding: 14px; font-size: 12px; color: #858585">
                    <span>{{item.filename}}</span>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <div class="load-more">
              <el-pagination background layout="prev, pager, next" @current-change="currentChange" :total="imageTotal" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="短链接列表" name="shortlist">
            <div class="short-list">
              <el-collapse v-model="activeIndex" accordion>
                <el-collapse-item v-for="(item, index) in shortList.data" :key="item.id" :title="item.short_url"
                  :name="index">
                  <div>
                    <div class="hits">
                      点击数：{{item.hits}}
                    </div>
                    <div class="short">
                      短链接：<a :href="item.short_url" target="_blank">{{item.short_url}}</a>
                    </div>
                    <div class="origin">
                      长链接：<a :href="item.origin_url" target="_blank">{{item.origin_url}}</a>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
              <div class="load-more">
                <el-pagination background layout="prev, pager, next" @current-change="currentChange" :total="shortTotal" />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="result" v-if="showResult" style="margin-bottom: 20px;">
          <el-divider>结果</el-divider>
          <el-result title="成功" style="padding: 0" sub-title="请复制链接">
            <template #icon>
              <el-input class="result-input" v-model="result.url">
                <template #prepend>Url</template>
              </el-input>
              <el-input class="result-input" v-model="result.html">
                <template #prepend>Html</template>
              </el-input>
              <el-image v-if="result.image != ''" :src="result.image" />
            </template>
            <template #extra>
              <el-button type="primary" @click="closeResult">关闭</el-button>
            </template>
          </el-result>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
  import {
    unref,
    ref,
    reactive
  } from 'vue';
  import {
    UploadFilled,
    Search
  } from '@element-plus/icons-vue';
  import axios from 'axios';

  const shortFormRef = ref();
  const editFormRef = ref();
  const loading = ref(false);
  const showResult = ref(false);
  const activeIndex = ref('1');
  const activeName = ref('short');
  const loadBtn = ref('加载更多');
  const imageTotal = ref(0);
  const shortTotal = ref(0);
  let page = 1;

  let tabIndex = 0;

  const result = reactive({
    url: '',
    html: '',
    image: ''
  });

  const uploadData = reactive({
    pass: ''
  })
  const shortForm = reactive({
    pass: '',
    long: ''
  })

  const editForm = reactive({
    pass: '',
    key: '',
    long: ''
  })

  const shortList = reactive({
    data: []
  });

  const getData = () => {
    if (editForm.key == '' || editForm.pass == '') {
      ElMessage({
        message: '密码或短链接不能为空',
        type: 'warning'
      });
      return;
    }
    loading.value = true;
    axios.get('https://s.bongm.com/api/editshort', {
      params: editForm
    }).then(res => {
      loading.value = false;
      if (res.status == 200) {
        if (res.data.code == 1) {
          editForm.long = res.data.data.origin_url;
        } else {
          ElMessage({
            message: res.data.msg,
            type: 'error'
          });
        }
      } else {
        ElMessage({
          message: '网络错误，请稍后再试',
          type: 'error'
        });
      }
    }).catch(() => {
      loading.value = false;
    })
  }

  const submitEditForm = (formEl) => {
    if (!formEl) return;
    if (editForm.pass == '' || editForm.long == '' || editForm.key == '') {
      ElMessage({
        message: '请完整填写表单',
        type: 'warning'
      });
      return;
    }
    loading.value = true;
    axios.post('https://s.bongm.com/api/editshort', editForm).then(res => {
      loading.value = false;
      if (res.status == 200) {
        if (res.data.code == 1) {
          ElMessage({
            message: '修改成功',
            type: 'success'
          });
        } else {
          ElMessage({
            message: res.data.msg,
            type: 'error'
          });
        }
      } else {
        ElMessage({
          message: '网络错误，请稍后再试',
          type: 'error'
        });
      }
    }).catch(() => {
      loading.value = false;
    })
  }

  const getList = () => {
    loading.value = true;
    axios.get('https://s.bongm.com/api/shortlist', {
      params: {
        page: page
      }
    }).then(res => {
      loading.value = false;
      if (res.status == 200) {
        if (res.data.code == 1) {
          if (res.data.data.data.length > 0) {
            shortList.data = page == 1 ? res.data.data.data : shortList.data.concat(res.data.data.data);
            if(page == 1){
              shortTotal.value = res.data.data.total;
            }
          } else {
            ElMessage({
              message: '没有更多数据了...',
              type: 'warning'
            });
          }
        } else {
          ElMessage({
            message: res.data.msg,
            type: 'error'
          });
        }
      } else {
        ElMessage({
          message: '网络错误，请稍后再试',
          type: 'error'
        });
      }
    }).catch(() => {
      loading.value = false;
      ElMessage({
        message: '列表获取失败，请稍后再试',
        type: 'error'
      });
    })
  }

  const currentChange = (p) => {
    page = p;
    if(tabIndex == 4){
      getList()
    }
    if(tabIndex == 3){
      getImageList()
    }
  }

  const getImageList = () => {
    loading.value = true;
    axios.get('https://s.bongm.com/api/imagelist', {
      params: {
        page: page
      }
    }).then(res => {
      loading.value = false;
      if (res.status == 200) {
        if (res.data.code == 1) {
          if (res.data.data.data.length > 0) {
            shortList.data = res.data.data.data;
            if(page == 1){
              imageTotal.value = res.data.data.total;
            }
          } else {
            ElMessage({
              message: '没有更多数据了...',
              type: 'warning'
            });
          }
        } else {
          ElMessage({
            message: res.data.msg,
            type: 'error'
          });
        }
      } else {
        ElMessage({
          message: '网络错误，请稍后再试',
          type: 'error'
        });
      }
    }).catch(() => {
      loading.value = false;
      ElMessage({
        message: '列表获取失败，请稍后再试',
        type: 'error'
      });
    })
  }

  const submitForm = (formEl) => {
    if (!formEl) return
    if (shortForm.pass == '' || shortForm.long == '') {
      ElMessage({
        message: '密码或链接不能为空',
        type: 'warning'
      });
      return;
    }
    loading.value = true;
    axios.post('https://s.bongm.com/api/short', shortForm).then(res => {
      loading.value = false;
      if (res.status == 200) {
        if (res.data.code == 1) {
          result.url = res.data.data.short_url;
          result.html = `<a href="${res.data.data.short_url}" target="_blank">${res.data.data.short_url}</a>`;
          showResult.value = true;
        } else {
          ElMessage({
            message: res.data.msg,
            type: 'error'
          });
        }
      } else {
        ElMessage({
          message: '网络错误，请稍后再试',
          type: 'error'
        });
      }
    }).catch(() => {
      loading.value = false;
    })
  }

  const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
  }

  const handleClick = (tab, event) => {
    tabIndex = tab.index;
    if (tab.index == 1 || tab.index == 2) {
      closeResult();
    }
    if (tab.index == 4) {
      shortList.data = [];
      page = 1;

      getList();
    }
    if (tab.index == 3) {
      shortList.data = [];
      page = 1;
      getImageList();
    }
  }
  const beforeUpload = function (file) {
    if (uploadData.pass == '') {
      ElMessage({
        message: '密码不能为空',
        type: 'warning'
      });
      return false;
    }
    loading.value = true;
  }
  const onSuccess = function (res) {
    if (res.code == 1) {
      result.url = res.data.fullurl;
      result.html = `<img src="${res.data.fullurl}" />`;
      result.image = res.data.fullurl;
      showResult.value = true;
    } else {
      ElMessage({
        message: res.msg,
        type: 'error'
      });
    }
    loading.value = false;
  }
  const onError = function (res) {
    ElMessage({
      message: '上传失败',
      type: 'error'
    });
    loading.value = false;
    closeResult();
  }
  const closeResult = () => {
    showResult.value = !1;
  }
</script>
<script>
  export default {
    name: 'App'
  }
</script>
<style>
  .el-card{
    height: 250px;
  }
  .el-card__body{
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .el-image{
    flex: 1;

  }
  .load-more {
    margin: 20px 0;
    display: flex;
    justify-content: center;
  }

  .index-header {
    margin: 20px 0 10px;
  }

  .el-collapse {
    border-top: 0 !important;
  }

  .el-upload-dragger,
  .el-upload {
    width: 100% !important;
  }

  .textarea-p textarea {
    padding: 5px 11px !important;
  }

  .el-form-item__label {
    font-size: 14px !important;
  }

  .index-warp {
    height: 100vh;
  }

  .result-input {
    margin-bottom: 18px;
  }
</style>